<template>
  <transition name="fade">
    <div class="wrap">
      <div class="header">
        <span @click="back">返回</span>
        <p>
          <b>登录</b>
        </p>
      </div>
      <div class="content">
        <p>手机号快捷登录</p>
          <div class="phone_input_wrap">
            <span>手机号</span>
            <div>
              <input type="number" ref="phone" v-model="phone_val" placeholder="请输入手机号">
            </div>

            <b @click="get_code" :class="val_ok===true?'ok':''" v-show="!is_send">获取验证码</b>
            <b v-show="is_send">重新获得({{num_time}})</b>
          </div>
          <div class="number_input_wrap">
               <span>验证码</span>
            <div>
               <input  v-model="num_val" ref="number" type="number" placeholder="请输入验证码">
            </div>

          </div>
          <div class="hint" v-show="hint_text">
            <b>{{hint_text}}</b>
          </div>

      </div>
      <div class="denglu_btn" @click="btn_denglu">
        登 录
      </div>
      <div class="tiaokuan_wrap">
        <span></span>
        <p>登录即代表您同意 <a href="">《铭材家装服务条款》</a></p>
      </div>
    </div>
  </transition>
</template>

<script>
  import {mapMutations} from 'vuex'
  import {get_code,denglu} from 'api/login'
  import {set_cookie,get_cookie} from 'assets/cookie/cookie'

    export default {
        name: "login",
      data(){
          return{
            is_send:false,
            val_ok:false,
            num_time:59,
            phone_val:"",
            num_val:"",
            hint_text:"",
            is_ajax:false
          }
      },
      methods:{
        back(){
          this.$router.push({
            path: "/",
          })
         this.setIsLogin(true)
        },
        btn_denglu(){
          let reg=/^[1]{1}\d{10}$/
         if(this.$refs.phone.value===''){
           this.hint_text='手机号不能为空'
           this.$refs.phone.focus()
         } else if(this.$refs.number.value===''){
           this.hint_text='验证码不能为空'
           this.$refs.number.focus()
         }else if(!reg.test(this.$refs.phone.value)){
           this.hint_text='手机号不正确'
           this.$refs.phone.focus()
         }else{
           this.hint_text=''
           denglu({
             loginName:this.phone_val,
                   code:this.num_val,
             authToken:get_cookie('weixinKey')
           }).then((res)=>{
             if(res.status===200&&res.data.resStatus===0){
               set_cookie("key",res.data.data.token)
               set_cookie("user",res.data.data.name)
               window.location.reload()
             }else{
               this.hint_text=res.data.message
             }
           })
         }
        },
        get_code(e){
          if(this.val_ok===true&&(this.is_ajax===false)){
            this.is_ajax=true
            get_code({m:this.phone_val}).then((res)=>{
              this.is_ajax=false
              if(res.status===200&&res.data.errno===0){
                this.is_send=true
                console.log(res.data.data)
               this.stop= setInterval(()=>{
                  this.num_time-=1
                 if(this.num_time<0){
                   this.is_send=false;
                   this.num_time=59
                    clearInterval(this.stop)
                 }
                },1000)
              }else{
                this.hint_text='错误'
              }
            })

          }
        },
        ...mapMutations({
          setIsLogin: 'SET_IS_LOGIN'
        })
      },
      watch:{
        phone_val(newVal){
          let reg=/^[1]{1}\d{10}$/
          if(reg.test(newVal)){
            this.val_ok=true
          }else{
            this.val_ok=false
          }
        }
      }
    }
</script>

<style scoped lang="scss">
   .wrap{
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #eee;
     z-index: 100;
   }
  .header{
    background-color: #fff;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 14px;
    letter-spacing: 1px;
    >span{
      position: absolute;
      left: 10px;
      top: 10px;
      padding: 5px;
      color: #999;
    }
    >p{
      color: #333;
    }
  }
  .content{
    background-color: #fff;
    margin-top: 17px;
    >p{
      height: 48px;
      font-size: 15px;
      line-height: 49px;
      border-bottom: 2px solid #009fe8;
      color: #454545;
    }
  }
  .phone_input_wrap{

    margin-top:10px;
    position: relative;
    padding-top: 10px;
    font-size: 16px;
    letter-spacing: 1px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
    >span{
      float: left;
      margin-left: 20px;
      margin-top: 4px;
    }
    >div{
      overflow: hidden;
      padding-left: 10px;
      padding-right: 20px;
      margin-top: 2px;
      input::-webkit-input-placeholder{
        font-size:16.4px;
      }
      >input{
        display: block;
        width: 100%;
        padding-right: 106px;
        font-size: 15px;
        height: 18px;
        line-height: 18px;
        vertical-align: middle;
        margin-top: 0;
        border: none;
        outline: none;
        text-align: center;
      }
    }
    >b{
      position: absolute;
      right: 15px;
      top: 3px;
      font-size: 13px;
      background: #aaa;
      border-radius: 2px;
      padding: 10px 5px;
      color: #fff;
    }
    >b.ok{
      background: #006ee5;
    }
  }
  .number_input_wrap{
    margin-top:10px;
    position: relative;
    padding-top: 10px;
    font-size: 16px;
    letter-spacing: 1px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    >span{
      float: left;
      margin-left: 20px;
      margin-top: 3px;
    }
    >div{
      overflow: hidden;
      padding-left: 10px;
      padding-right: 20px;
      margin-top: 2px;
      input::-webkit-input-placeholder{
        font-size:16px;
      }
      >input{
        display: block;
        width: 100%;
        padding-right: 106px;
        font-size: 15px;
        height: 18px;
        line-height: 18px;
        vertical-align: middle;
        margin-top: 0;
        border: none;
        outline: none;
        text-align: center;
      }
    }
  }
  .denglu_btn{
    width: 92%;
    margin: 0 auto;
    height: 40px;
    line-height: 42px;
    background: #009fe8;
    color: #fff;
    border-radius: 3px;
    margin-top: 26px;
    font-size: 14px;
  }
  .tiaokuan_wrap{
    margin-top: 15px;
    >span{
      width: 15px;
      height: 15px;
      margin-right: 3px;
      background-image: url('../assets/img/g.png');
      background-size: 100% 100%;
      display: inline-block;
      vertical-align: middle;
    }
    >p{
      display: inline-block;
      vertical-align: middle;
      color: #868686;
      >a{
        color: #009fe8;
      }
    }
  }
  .hint{
    text-align: left;
    padding-left: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
    color: #f00;
    font-size: 12px;

    >b{
      font-weight: 500;
    }
  }
   .fade-enter-active /* .fade-leave-active below version 2.1.8 */
   {
     opacity: 0;
   }

   .fade-enter-to /* .fade-leave-active below version 2.1.8 */
   {
     opacity: 1;
     transition: all .5s;
   }
</style>
